<template>
  <div class="bangongshi-container">
    <Header />
    <div class="management-main">
      <div class="left-nav">
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'memberManagement'" 
          :class="{ 'active': activeTab === 'memberManagement' }"
        >
          成员管理
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'meetingManagement'" 
          :class="{ 'active': activeTab === 'meetingManagement' }"
        >
          部门会议
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'materialManagement'" 
          :class="{ 'active': activeTab === 'materialManagement' }"
        >
          物资管理
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'personalCenter'" 
          :class="{ 'active': activeTab === 'personalCenter' }"
        >
          个人中心
        </a>
      </div>
      
      <div class="content-area">
        <!-- 成员管理 -->
        <div class="module-card" v-if="activeTab === 'memberManagement'">
          <div class="module-header">
            <h3>成员管理</h3>
            <button @click="showAddMemberDialog = true" class="btn-primary">添加成员</button>
          </div>
          
          <table class="data-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学院</th>
                <th>学号</th>
                <th>职位</th>
                <th>联系方式</th>
                <th>入社时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(member, index) in bangongshiMembers" :key="member.id">
                <td>{{ index + 1 }}</td>
                <td>{{ member.name }}</td>
                <td>{{ member.college }}</td>
                <td>{{ member.studentId }}</td>
                <td>{{ member.position }}</td>
                <td>{{ member.phone }}</td>
                <td>{{ member.joinDate }}</td>
                <td class="operation-buttons">
                  <button @click="handleView(member.id)" class="btn-view">查看</button>
                  <button @click="handleEdit(member)" class="btn-edit">编辑</button>
                </td>
              </tr>
              <tr v-if="bangongshiMembers.length === 0">
                <td colspan="8" class="no-data">暂无成员数据</td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 部门会议 -->
        <div class="module-card" v-if="activeTab === 'meetingManagement'">
          <div class="module-header">
            <h3>部门会议</h3>
            <button @click="showAddMeetingDialog = true" class="btn-primary">新增会议内容</button>
          </div>
          
          <div class="meeting-actions">
            <button @click="downloadMeetingTemplate" class="btn-secondary">下载会议记录模板</button>
            <input 
              type="text" 
              v-model="meetingSearch" 
              placeholder="搜索会议标题"
              class="search-input"
            >
          </div>
          
          <div class="meeting-list">
            <div v-for="meeting in filteredMeetings" :key="meeting.id" class="meeting-item">
              <div class="meeting-header">
                <h4>{{ meeting.title }}</h4>
                <div class="meeting-meta">
                  <span>日期：{{ meeting.date }}</span>
                  <span>主持人：{{ meeting.host }}</span>
                  <span>参会人数：{{ meeting.attendeeCount }}</span>
                </div>
              </div>
              <div class="meeting-content">
                <p>{{ meeting.content.length > 100 ? meeting.content.slice(0, 100) + '...' : meeting.content }}</p>
              </div>
              <div class="meeting-operations">
                <button @click="handleViewMeeting(meeting)" class="btn-view">查看详情</button>
                <button @click="handleEditMeeting(meeting)" class="btn-edit">编辑</button>
              </div>
            </div>
            <div v-if="filteredMeetings.length === 0" class="no-data">
              暂无会议记录
            </div>
          </div>
        </div>
        
        <!-- 物资管理 -->
        <div class="module-card" v-if="activeTab === 'materialManagement'">
          <div class="module-header">
            <h3>物资管理</h3>
            <button @click="showAddMaterialDialog = true" class="btn-primary">新增物资</button>
          </div>
          
          <table class="data-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>物资名称</th>
                <th>类别</th>
                <th>数量</th>
                <th>存放位置</th>
                <th>状态</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(material, index) in materials" :key="material.id">
                <td>{{ index + 1 }}</td>
                <td>{{ material.name }}</td>
                <td>{{ material.category }}</td>
                <td>{{ material.quantity }}</td>
                <td>{{ material.location }}</td>
                <td><span :class="material.status === '正常' ? 'status-normal' : 'status-warning'">{{ material.status }}</span></td>
                <td>{{ material.updateTime }}</td>
                <td class="operation-buttons">
                  <button @click="handleEditMaterial(material)" class="btn-edit">编辑</button>
                </td>
              </tr>
              <tr v-if="materials.length === 0">
                <td colspan="8" class="no-data">暂无物资数据</td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 个人中心 -->
        <div class="module-card" v-if="activeTab === 'personalCenter'">
          <h3>个人中心</h3>
          <div class="personal-info">
            <div class="info-item">
              <span class="label">姓名：</span>
              <span class="value">{{ userInfo.name }}</span>
            </div>
            <div class="info-item">
              <span class="label">学号：</span>
              <span class="value">{{ userInfo.studentId }}</span>
            </div>
            <div class="info-item">
              <span class="label">学院：</span>
              <span class="value">{{ userInfo.college }}</span>
            </div>
            <div class="info-item">
              <span class="label">职位：</span>
              <span class="value">{{ userInfo.position }}</span>
            </div>
            <div class="info-item">
              <span class="label">联系方式：</span>
              <span class="value">{{ userInfo.phone }}</span>
            </div>
            <button @click="showEditProfileDialog = true" class="btn-edit">编辑资料</button>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeTab = ref('memberManagement')

// 成员管理相关
const members = ref([
  { id: 1, name: '张明', studentId: '2021010', college: '计算机学院', department: '办公室', position: '部长', phone: '13800138010', joinDate: '2021-09-01', remark: '负责办公室全面工作' },
  { id: 2, name: '李华', studentId: '2021011', college: '信息学院', department: '办公室', position: '副部长', phone: '13800138011', joinDate: '2021-09-01', remark: '负责物资管理' },
  { id: 3, name: '王芳', studentId: '2022012', college: '软件学院', department: '办公室', position: '干事', phone: '13800138012', joinDate: '2022-03-15', remark: '负责会议记录' }
])

const bangongshiMembers = computed(() => {
  return members.value.filter(member => member.department === '办公室')
})

const showAddMemberDialog = ref(false)
const showEditMemberDialog = ref(false)
const editingMember = ref({})

// 查看成员详情
const handleView = (id) => {
  router.push(`/buzhang/bangongshiDetail/${id}`)
}

// 编辑成员
const handleEdit = (member) => {
  editingMember.value = { ...member }
  showEditMemberDialog.value = true
}

// 部门会议相关
const meetings = ref([
  { 
    id: 1, 
    title: '新学期工作安排会议',
    date: '2023-09-01',
    host: '张明',
    attendees: ['张明', '李华', '王芳'],
    attendeeCount: 3,
    location: '会议室A',
    content: '讨论新学期办公室工作计划，分配各成员职责，确定物资盘点时间'
  },
  { 
    id: 2, 
    title: '物资管理规范会议',
    date: '2023-09-15',
    host: '李华',
    attendees: ['张明', '李华', '王芳'],
    attendeeCount: 3,
    location: '会议室A',
    content: '制定新的物资管理规范，明确借用流程和登记要求'
  }
])

const meetingSearch = ref('')
const filteredMeetings = computed(() => {
  return meetings.value.filter(meeting => 
    meeting.title.includes(meetingSearch.value)
  )
})

const showAddMeetingDialog = ref(false)

const downloadMeetingTemplate = () => {
  // 实际项目中实现模板下载功能
  alert('会议记录模板下载中...')
}

const handleViewMeeting = (meeting) => {
  // 查看会议详情逻辑
  alert(`查看${meeting.title}详情`)
}

const handleEditMeeting = (meeting) => {
  // 编辑会议逻辑
  alert(`编辑${meeting.title}`)
}

// 物资管理相关
const materials = ref([
  { id: 1, name: '笔记本电脑', category: '电子设备', quantity: 5, location: '储物间A', status: '正常', updateTime: '2023-09-01' },
  { id: 2, name: '投影仪', category: '电子设备', quantity: 2, location: '储物间A', status: '正常', updateTime: '2023-09-01' },
  { id: 3, name: '办公桌', category: '家具', quantity: 10, location: '办公室', status: '正常', updateTime: '2023-08-15' },
  { id: 4, name: '打印纸', category: '办公用品', quantity: 30, location: '储物间B', status: '不足', updateTime: '2023-09-10' }
])

const showAddMaterialDialog = ref(false)

const handleEditMaterial = (material) => {
  // 编辑物资逻辑
  alert(`编辑${material.name}`)
}

// 个人中心相关
const userInfo = ref({
  name: '张明',
  studentId: '2021010',
  college: '计算机学院',
  position: '办公室部长',
  phone: '13800138010'
})

const showEditProfileDialog = ref(false)
</script>

<style scoped>
/* 基础样式沿用其他部门的布局风格 */
.bangongshi-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.management-main {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.left-nav {
  width: 200px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: block;
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 8px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  color: #333;
}

.nav-item:hover {
  background-color: #e6f7ff;
  color: #1890ff;
}

.nav-item.active {
  background-color: #1890ff;
  color: white;
}

.content-area {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th, .data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: 500;
}

.operation-buttons {
  display: flex;
  gap: 8px;
}

.btn-view {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-edit {
  background-color: #52c41a;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 30px;
}

/* 会议相关样式 */
.meeting-actions {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-width: 300px;
}

.meeting-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.meeting-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 15px;
}

.meeting-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.meeting-meta {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 14px;
}

.meeting-content {
  margin-bottom: 15px;
  color: #333;
}

.meeting-operations {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 物资管理相关样式 */
.status-normal {
  color: #52c41a;
  background-color: #f6ffed;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-warning {
  color: #faad14;
  background-color: #fffbe6;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 个人中心样式 */
.personal-info {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
}

.label {
  width: 100px;
  font-weight: bold;
  color: #666;
}

.value {
  flex: 1;
  color: #333;
}
</style>